<template>
  <div>
    <van-row type="flex" justify="center">
      <van-tabbar v-model="active">
        <van-tabbar-item is-link to="/home" badge="3" icon="chat-o">我的好友</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/contact">通讯录</van-tabbar-item>
        <van-tabbar-item is-link to="/discover" icon="browsing-history-o">发现</van-tabbar-item>
        <van-tabbar-item is-link to="/profile"  icon="chat-o">个人</van-tabbar-item>
      </van-tabbar>
    </van-row>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Tabbar, TabbarItem } from 'vant';
  Vue.use(Tabbar);
  Vue.use(TabbarItem);
  export default {
    name: "MainTabBar",
    data(){
        return{
           active:this.activeValue
        }
    },
    props: {
        activeValue: {
            default: '0'
        },
    },

  }
</script>

<style scoped>

</style>
